<template>
  <!-- @click.top="closeCard" -->
  <!-- <div class="answer-card-mask" @click.stop="closeCard"></div> -->
  <div class="answer-card-overlay" v-if="modelValue">
    <div class="answer-card">
      <div class="header">
        <div class="header-left">
          <h3>答题卡</h3>
          <div class="status-legend">
            <span class="status-item"><i class="dot todo"></i>未做</span>
            <span class="status-item"><i class="dot done"></i>已做</span>
            <span class="status-item"><i class="dot wrong"></i>答错</span>
            <span class="status-item"><i class="dot correct"></i>答对</span>
          </div>
        </div>
        <button class="close-btn" @click.stop="closeCard">×</button>
      </div>

      <div class="questions-grid">
        <div
          class="section-item"
          :class="{ active: index == examStore.currQuestion?.sectionIndex }"
          v-for="(section, index) in examStore.examInfo?.section"
        >
          <span>{{ "Section" + (index + 1) }}</span>

          <div class="question-list">
            <div
              v-for="(question, ind) in examStore.examInfo?.section?.[index]?.question"
              :key="ind"
              :class="[
                'question-item',
                {
                  todo: !question.is_answer,
                  done: question.is_answer,
                  wrong: !question.is_right && question.is_answer,
                  correct: question.is_right && question.is_answer,
                  active:
                    examStore.currQuestion?.sectionIndex == index &&
                    examStore.currQuestion?.index == ind,
                },
              ]"
              @click="onQuestionClick(index, ind)"
            >
              {{ ind + 1 }}
            </div>
            <!-- @click="onQuestionClick(index, ind)" -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
const props = defineProps({
  // questions: {
  //   type: Array,
  //   required: true,
  // },
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["closeModal", "question-click"]);

const closeCard = () => {
  console.log(props.modelValue, 'props.modelValue');
  if(props.modelValue) emit("closeModal", false);
};

const onQuestionClick = async (index, ind) => {
  // 提交试题
  // await examStore.submitQuestion();

  closeCard();

  examStore.currQuestion.sectionIndex = index;
  examStore.currQuestion.index = ind;
  examStore.changeQuestion();
};
</script>

<style lang="scss" scoped>
  .answer-card-overlay {
    position: absolute;
    bottom: 0px;
    left: 0;
    // width: 100%;
    // height: 100%;
    // background: rgba(0, 0, 0, 0.5);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    z-index: 1000;
  }

.answer-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 600px;
  min-height: 211px;
  // max-width: 600px;
  box-shadow: 0px 4px 20px 0px #219fc71c;
  overflow-y: auto;

  .header-left {
    display: flex;
  }
  .header {
    display: flex;
    justify-content: space-between;
    // justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      margin: 0;
    }

    .close-btn {
      border: none;
      background: none;
      font-size: 24px;
      cursor: pointer;
      padding: 5px;
    }
  }

  .status-legend {
    display: flex;
    gap: 15px;
    margin-left: 20px;

    .status-item {
      display: flex;
      align-items: center;
      gap: 5px;

      .dot {
        width: 12px;
        height: 12px;
        //   border-radius: 50%;
        display: inline-block;
      }
    }
  }
}

.questions-grid {
  display: flex;
  flex-direction: column;

  .question-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    margin-top: 10px;
  }

  .question-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;

    &.todo {
      background: #fff;
      border: 1px solid #ddd;
    }

    &.done {
      background: #1890ff;
      color: white;
    }

    &.wrong {
      background: #ff4d4f;
      color: white;
    }

    &.correct {
      background: #52c41a;
      color: white;
    }

    &.active {
      border: 1px solid #126983;
      color: #126983;
    }
  }
}

.dot {
  &.todo {
    background: #ddd;
  }
  &.done {
    background: #1890ff;
  }
  &.wrong {
    background: #ff4d4f;
  }
  &.correct {
    background: #52c41a;
  }
}
</style>
